<template>
    <div :class="`yv-col yv-col-${realSpan}`">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "YvCol",
    props: {
        span: {
            type: Number,
            default: 40
        },
        offset: {
            type: Number,
            default: 0
        },
        // 是否根据分辨率设置Span
        //4k
        uhd: {
            type: Number,
            default: -1,
        },
        //2k
        qhd: {
            type: Number,
            default: -1,
        },
        //1080p
        fhd: {
            type: Number,
            default: -1,
        },
        //720p
        hd: {
            type: Number,
            default: -1,
        },
        //720p-
        sm: {
            type: Number,
            default: -1,
        }
    },
    data() {
        return {
            realSpan: 40,
            widthObj: {
                uhd: 2560,
                qhd: [1920, 2560],
                fhd: [1280, 1920],
                hd: [720, 1280],
                sm: 720
            }
        }
    },
    watch: {
        span(val) {
            this.onResize();
        },
        uhd(val) {
            this.onResize();
        },
        qhd(val) {
            this.onResize();
        },
        fhd(val) {
            this.onResize();
        },
        hd(val) {
            this.onResize();
        },
        sm(val) {
            this.onResize();
        }
    },
    beforeMount() {
        this.onResize();
        window.addEventListener("resize", this.onResize);
    },
    methods: {
        // 监听窗口大小变化
        onResize() {
            let w = window.innerWidth;
            // sm
            if (w < this.widthObj.sm && this.sm != -1) {
                this.realSpan = this.sm;
            }
            // uhd 大于2560
            else if (w >= this.widthObj.uhd && this.uhd != -1) {
                this.realSpan = this.uhd;
            }
            // qhd 大于1920
            else if (w >= this.widthObj.qhd[0] && w < this.widthObj.qhd[1] && this.qhd != -1) {
                this.realSpan = this.qhd;
            }
            // fhd 大于1280
            else if (w >= this.widthObj.fhd[0] && w < this.widthObj.fhd[1] && this.fhd != -1) {
                this.realSpan = this.fhd;
            }
            // hd 大于640
            else if (w >= this.widthObj.hd[0] && w < this.widthObj.hd[1] && this.hd != -1) {
                this.realSpan = this.hd;
            }
            // 默认
            else {
                this.realSpan = this.span;
            }
        }
    },
}
</script>

<style></style>